<template>
  <div class="contBody">
    <h2 class="title" @click="handleTab">环形图（点击更换数据）</h2>
    <!-- echarts 环形图 -->
    <EchartsComp
      class="ringBar"
      ref="chart"
      :options="ringDiagramOptions"
      width="100%"
      height="600px"
    />
  </div>
</template>

<script>
import EchartsComp from "@/components/echarts/EchartsComp.vue";
export default {
  name: "RingDiagramPage",
  data() {
    return {
      ringDiagramOptions: {},
      ringDiagramData: [
        {
          name: "本科",
          value: 300,
        },
        {
          name: "硕士",
          value: 350,
        },
        {
          name: "大专",
          value: 400,
        },
        {
          name: "博士",
          value: 150,
        },
      ],
    };
  },
  components: { EchartsComp },
  created() {
    this.init();
  },
  methods: {
    init() {
      // 最大值
      this.sumValue = 500;
      const optionData = this.getData(this.ringDiagramData);

      this.ringDiagramOptions = {
        backgroundColor: "RGB(8,20,67)",
        color: [
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(10,31,95,1)",
              },
              {
                offset: 1,
                color: "rgba(1,232,254,1)",
              },
            ],
            global: false,
          },
        ],
        grid: {
          top: "16%",
          bottom: "54%",
          left: "50%",
          containLabel: false,
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            z: 3,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              inside: false,
              textStyle: {
                color: "RGB(78,184,252)",
                fontSize: 20,
              },
              show: true,
            },
            data: optionData.yAxis,
          },
        ],
        xAxis: [
          {
            show: false,
          },
        ],
        series: optionData.series,
      };
    },
    getData(data) {
      let res = {
        series: [
          {
            name: "大环",
            type: "gauge",
            splitNumber: 15,
            radius: "92%",
            center: ["50%", "55%"],
            startAngle: 90,
            endAngle: -270,
            axisLine: {
              show: false,
              lineStyle: {
                color: [[1, "#1f59a7"]],
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              length: 32,
              lineStyle: {
                color: "auto",
                width: 3.5,
              },
            },
            axisLabel: {
              show: false,
            },
            detail: {
              show: false,
            },
          },
          {
            name: "小环",
            type: "gauge",
            splitNumber: 15,
            radius: "88%",
            center: ["50%", "55%"],
            startAngle: 90,
            endAngle: -269.9999,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: "#1f59a7",
                width: 3,
              },
              length: 20,
              splitNumber: 5,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            detail: {
              show: false,
            },
          },
        ],
        yAxis: [],
      };
      for (let i = 0; i < data.length; i++) {
        res.series.push({
          name: "学历",
          type: "pie",
          clockWise: true,
          z: 2,
          hoverAnimation: false,
          radius: [73 - i * 15 + "%", 68 - i * 15 + "%"],
          center: ["50%", "55%"],
          label: {
            show: true,
            formatter: "{d}%",
            color: "RGB(246,175,101)",
            fontSize: 20,
            position: "inside",
          },
          labelLine: {
            show: false,
          },
          data: [
            {
              value: data[i].value,
              name: data[i].name,
            },
            {
              value: this.sumValue - data[i].value,
              name: "",
              itemStyle: {
                color: "rgba(0,0,0,0)",
                borderWidth: 0,
              },
              tooltip: {
                show: false,
              },
              label: {
                show: false,
              },
              hoverAnimation: false,
            },
          ],
        });
        res.series.push({
          name: "背景线",
          type: "pie",
          silent: true,
          z: 1,
          clockWise: true,
          hoverAnimation: false,
          radius: [71 - i * 15 + "%", 69 - i * 15 + "%"],
          center: ["50%", "55%"],
          label: {
            show: false,
          },
          itemStyle: {
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            borderWidth: 5,
          },
          data: [
            {
              value: 100,
              itemStyle: {
                color: "RGB(12,64,128)",
                borderWidth: 0,
              },
              tooltip: {
                show: false,
              },
              hoverAnimation: false,
            },
          ],
        });
        res.yAxis.push(data[i].name);
      }
      return res;
    },
    async handleTab() {
      // 数据更新
      this.ringDiagramData = [
        {
          name: "本科",
          value: this.getNum(350, 400),
        },
        {
          name: "硕士",
          value: this.getNum(300, 350),
        },
        {
          name: "大专",
          value: this.getNum(250, 300),
        },
        {
          name: "博士",
          value: this.getNum(100, 150),
        },
      ];
      await this.init();
      this.$refs.chart.Refresh();
    },
    // 生成随机数
    getNum(min, max) {
      const num = parseInt(Math.random() * (max - min + 1) + min);
      return Math.floor(num);
    },
  },
};
</script>

<style scoped>
.contBody {
  width: 100%;
  box-sizing: border-box;
}

.contBody .title {
  padding: 0 0 24px;
}
</style>
